<template>
    <el-card>
        <!-- filterable搜索框和模糊匹配 -->
        <el-select v-model="value" placeholder="Select" style="width: 300px" filterable>
            <el-option v-for="item in selectOption" :key="item.id" :label="item.name" :value="item.name"></el-option>
        </el-select>
    </el-card>
    <el-card class="mt">
        <el-radio-group v-model="radio" size="large" @change="changeRaDadio">
            <el-radio-button :label="`全部${allCount}`" :value="0" />
            <el-radio-button :label="`空闲中(${checkCount(1)})`" :value="1" />
            <el-radio-button :label="`充电中${checkCount(2)}`" :value="2" />
            <el-radio-button :label="`连接中${checkCount(3)}`" :value="3" />
            <el-radio-button :label="`排队中${checkCount(4)}`" :value="4" />
            <el-radio-button :label="`已预约${checkCount(5)}`" :value="5" />
            <el-radio-button :label="`故障/离线${checkCount(6)}`" :value="6" />
        </el-radio-group>
    </el-card>
    <el-card class="mt">
        <template #header>
            <div class="card-header">
                <h1 style="font-size: 30px;">{{ value }}充电桩状态</h1>
            </div>
        </template>
        <el-row :gutter="20" v-loading="loading">
            <el-col :span="6" v-for="item in CopyCurrenList" :key="item.id">
                <div class="main">
                    <div class="status">
                        <p v-if="item.status === 1">空闲中</p>
                        <p v-if="item.status === 2">充电中</p>
                        <p v-if="item.status === 3">连接中</p>
                        <p v-if="item.status === 4">排队中</p>
                        <p v-if="item.status === 5">已预约</p>
                        <p v-if="item.status === 6">故障/离线</p>
                        <img :src="item.status === 1 ? free : (item.status === 6 ? outline : ing)" alt="">
                        <p>{{ item.percent || "0%" }}</p>
                    </div>
                    <div class="into">
                        <h4>{{ item.id }}</h4>
                        <hr>
                        <p>电压：{{ item.voltage }}</p>
                        <p>电流：{{ item.current }}</p>
                        <p>功率：{{ item.power }}</p>
                        <p>温度：{{ item.tem }}</p>
                    </div>
                </div>
                <div class="btn">
                    <div class="divder"></div>
                    <div style="margin-right: 10px;">
                        <p class="fl">暂无预警</p>
                        <div class="fr">
                            <el-popover placement="top-start" title="受用记录" :width="300" trigger="hover"
                                content="this is content, this is content, this is content">
                                <template #reference>
                                    <el-button size="small">维保记录</el-button>
                                </template>
                                <el-timeline style="max-width: 800px">
                                    <el-timeline-item timestamp="2025/9/23" :hollow="true" type="danger"
                                        placement="top">
                                        <el-card>
                                            <h4 style="width: 200px;">矿业北路通讯中断</h4>
                                        </el-card>
                                    </el-timeline-item>
                                    <el-timeline-item timestamp="2025/9/23" :hollow="true" type="success"
                                        placement="top">
                                        <el-card>
                                            <h4 style="width: 200px;">黄河南路超出服务器区域</h4>
                                        </el-card>
                                    </el-timeline-item>
                                    <el-timeline-item timestamp="2025/9/23" :hollow="true" type="danger"
                                        placement="top">
                                        <el-card>
                                            <h4 style="width: 200px;">6号机组异常断电</h4>
                                        </el-card>
                                    </el-timeline-item>
                                </el-timeline>
                            </el-popover>
                            <el-popover placement="top-start" title="受用记录" :width="300" trigger="hover"
                                content="this is content, this is content, this is content">
                                <template #reference>
                                    <el-button size="small" type="primary">使用记录</el-button>
                                </template>
                                <el-timeline style="max-width: 800px">
                                    <el-timeline-item timestamp="2025/9/23" :hollow="true" type="danger"
                                        placement="top">
                                        <el-card>
                                            <h4 style="width: 200px;">矿业北路通讯中断</h4>
                                        </el-card>
                                    </el-timeline-item>
                                    <el-timeline-item timestamp="2025/9/23" :hollow="true" type="success"
                                        placement="top">
                                        <el-card>
                                            <h4 style="width: 200px;">黄河南路超出服务器区域</h4>
                                        </el-card>
                                    </el-timeline-item>
                                    <el-timeline-item timestamp="2025/9/23" :hollow="true" type="danger"
                                        placement="top">
                                        <el-card>
                                            <h4 style="width: 200px;">6号机组异常断电</h4>
                                        </el-card>
                                    </el-timeline-item>
                                </el-timeline>
                            </el-popover>

                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>
    </el-card>
</template>

<script setup lang="ts">
import { ref, onMounted, computed, watch } from 'vue'
import { getCurrentListAPI } from '@/api/chargingstation'
import free from "@/assets/free.png"
import outline from "@/assets/outline.png";
import ing from "@/assets/ing.png"
// 下拉框的值
const selectOption = ref<any[]>([])
// 选中的绑定的值
const radio = ref<number>(0)
// 请求返回的值
const CurrenList = ref<any[]>([])
//请求的值进行拷贝，作用于查询
const CopyCurrenList = ref<any[]>([])
// 跟下拉框的双向绑定的值
const value = ref<string>('北京西单充电站')
// 设置加载效果
const loading = ref<boolean>(false)

// 对接口发起请求获取数据
const loadData = async () => {
    loading.value = true
    const res = await getCurrentListAPI()
    loading.value = false
    selectOption.value = res.data
    CurrenList.value = res.data[0].list
    CopyCurrenList.value = res.data[0].list
}
onMounted(() => {
    loadData()
})
// 查看长度
function checkCount(id: number) {
    return CurrenList.value.filter((item: any) => item.status === id).length
}
const allCount = computed(() => {
    return checkCount(1) + checkCount(2) + checkCount(3) + checkCount(4) + checkCount(5) + checkCount(6)
})
// 选中radio选项进行切换
const changeRaDadio = (status: any) => {
    // 加载效果
    loading.value = true
    CopyCurrenList.value = CurrenList.value
    if (status !== 0) {
        CopyCurrenList.value = CopyCurrenList.value.filter((item: any) => item.status === status)
    }
    setTimeout(() => {
        loading.value = false
    }, 200)

}
// 去监听选项的变化
watch(value, () => {
    console.log(value.value)
    loading.value = true
    const res = selectOption.value.filter((item: any) => item.name === value.value)
    CopyCurrenList.value = res[0].list
    CurrenList.value = res[0].list
    setTimeout(() => {
        loading.value = false
    }, 440)
})
</script>




<style lang="less" scoped>
.main {
    display: flex;
    margin-top: 20px;
    align-items: center;
    justify-content: center;
    background-color: #f7fbfe;
    height: 200px;
    padding: 20px;
    border-radius: 10px 10px 0px 0px;

    .status {
        margin-top: 50px;
        img {
            width: 100px;
            height: 100px;
        }

        p {
            line-height: 50px;
            margin-left: -30px;
            text-align: center;
            color: #57c4a1;
        }
    }
}

.into {
    margin-top: 20px;
    margin-left: 50px;
    color: #999999;

    hr {
        margin-bottom: 20px;
    }

    p {
        font-size: 16px;
    }
}

.btn {
    width: 100%;
    height: 50px;
    background-color: #f7fbfe;
    line-height: 50px;

    p {
        font-size: 14px;
        color: gray;
    }

    .divder {
        width: 95%;
        margin: auto;
        height: 2px;
        background-color: #f4f4f4;
    }
}
</style>